<!--**
* @author: SEKin
* @Date: 2025-03-21
* @description:  tab页动画，通过css锚点实现
* @Last Modified time: 
*-->
<template>
		<div class="layout-center">
			<ul>
				<li><a href="#">Home</a></li>
				<li class="active"><a href="#">About</a></li>
				<li><a href="#">Projects</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
<!--备注-->
</template>
<script setup lang="ts">
import { } from 'vue';

function async2 (_a:string, b:string) {
    console.log('3')
		localStorage.clear();
    return b;
}
console.log(async2)


/**
*@description 属性定义区
*/


/**
*@description 方法区
*/


/**
*@description 数据变更区
*/


/**
*@description 组件导出区
*/


</script>
<style lang="scss" scoped >
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}
ul:before {
  content:"";
  position: absolute;
  position-anchor: --li;
  border-radius: 50%;
  inset: auto calc(anchor(center) - .2em) anchor(bottom);
  aspect-ratio: 1;
  background: red;
  transition: .3s .2s,.3s .2s cubic-bezier(0,-900,1,-900) bottom;
}
ul li {
  position: relative;
}
ul li:before {
  content:"";
  position: absolute;
  z-index: -1;
   inset: 100% 50% 0;
  border-radius: 50%;
  background: lightblue;
  transition: .2s;

}
ul li:is(:hover, .active):before {
  anchor-name: --li;
  inset: 0;
  border-radius: 0%;
  transition: .2s .5s;
}

ul:has(li:hover) li.active:not(:hover):before {
  anchor-name: none;
  inset: 100% 50% 0;
  border-radius: 50%;
  transition: .2s;
}

ul:not(#_) li:nth-child(1):before{bottom: -.1px}
ul:not(#_) li:nth-child(2):before{bottom: -.2px}
ul:not(#_) li:nth-child(3):before{bottom: -.3px}
ul:not(#_) li:nth-child(4):before{bottom: -.4px}
ul:not(#_) li:nth-child(5):before{bottom: -.5px}

ul li a {
  color: #000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.6;
  padding-inline: .2em;
  display: block;
}

</style>

